<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();

</script>

<template>
  <view class="header">
    <navigator url="/pages/index/index" class="left" open-type="switchTab">首页</navigator>
    <view class="mid">
      <view class="search-box">
        <img src="@/static/images/search@2x.png" alt="" class="search-img" />
        <input type="text" placeholder="关键词搜索" class="search-input" />
      </view>
    </view>
    <view class="right">
      <img src="@/static/images/mail@2x.png" class="email-img" />
    </view>
  </view>
</template>

<style lang="scss">
.header {
  display: flex;
  height: 92rpx;
  margin: 0 64rpx;
  margin-top: 150rpx;
  background-color: #fff;

  .left {
    margin-top: 0;
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 30rpx;
    font-family: Inter, Inter-700;
    font-weight: 700;
    text-align: CENTER;
    color: #f2bb16;
  }

  .mid {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    .search-box {
      display: flex;
      align-items: center;
      width: 452rpx;
      height: 70rpx;

      background: #fffaec;
      border-radius: 20rpx;
      box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.15);

      .search-img {
        width: 34rpx;
        height: 34rpx;
        margin-left: 18rpx;
        margin-right: 10rpx;
      }

      .search-input {
        font-size: 30rpx;
        font-weight: 400;

        &::placeholder {
          color: #000000 26%;
        }
      }
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    flex-grow: 1;

    .email-img {
      width: 48rpx;
      height: 48rpx;
    }
  }
}
</style>
